<script>
// 首页
import navfooterView from "../components/navfooterView.vue";

import { reactive, ref, toRefs } from "vue";
import { getBanner, getmale, getfemale, getpublish } from "../api/home.js";
export default {
  setup() {
    const list = reactive({
      bannerList: null, //轮播图数据
      lists: [], //精选排行榜数据
      RankingIndex: 0, //精选排行榜数据下标

      malelist: [], //男生数据
      maledata: [], //3*1+3*2

      femalelist: [], //女生数据
      femaledata: [], //3*1+3*2

      publishlist: [], //出版数据
      publishdata: [], //出版宫格
    });

    //排行榜数据
    let RankingList = ref(null);

    // 精选数据
    getBanner().then((data) => {
      list.bannerList = data.data[0].lists;
      console.log("轮播", list.bannerList);
      //获取数据
      list.lists = data.data;
      console.log("精选", list.lists);
      list.bannerList = list.bannerList.filter((item, index) => index > 0);
    });

    // 男生数据
    getmale().then((data) => {
      list.malelist = data.data;
      data.data.forEach((item, index) => {
        if (index > 5 && index < 13) {
          list.maledata.push(item);
        }
      });
      // console.log(list.maledata);
      console.log("男生数据", list.malelist);
    });

    //女生数据11
    getfemale().then((data) => {
      list.femalelist = data.data;
      data.data.forEach((item, index) => {
        if (index > 5 && index < 11) {
          list.femaledata.push(item);
        }
      });
      console.log("首页女生", list.femalelist);
      //  console.log("宫格",list.femaledata);
    });

    //出版数据
    getpublish().then((data) => {
      list.publishlist = data.data;
      data.data.forEach((item, index) => {
        if (index > 1 && index != 5 && index < 11) {
          list.publishdata.push(item);
        }
      });
      console.log("首页出版", list.publishlist);
      console.log("宫格", list.publishdata);
    });

    //切换下标
    let btnFun = (index) => {
      list.RankingIndex = index;
    };

    //过滤器
    let getFilter = (value) => {
      if (value < 10000) {
        return value;
      }
      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万";
      return y;
    };

    const active = ref(0);
    return {
      active, //toas
      ...toRefs(list),
      RankingList,
      getFilter, //过滤器
      btnFun,
    };
  },
  components: {
    navfooterView,
  },
};
</script>

<template>
  <!-- 测试注释 -->
  <div class="home">
    <div class="bigbox">
      <!-- 搜索 -->
      <div class="sarch">
        <router-link custom to="/searchView" v-slot="{ href, navigate }">
          <div class="left" :href="href" @click="navigate">
            <i class="iconfont icon-sousuo"></i>
            逆天邪神
          </div>
        </router-link>
        <router-link custom to="/leaderboard" v-slot="{ href, navigate }">
          <div class="right" :href="href" @click="navigate">
            <i class="iconfont icon-fenlei"></i>
            <div>分类</div>
          </div>
        </router-link>
      </div>

      <van-tabs
        :active="active"
        :animated="true"
        :sticky="true"
        offset-top="54px"
      >
        <van-tab title="精选">
          <div class="maxbox">
            <!-- 轮播图 -->
            <div class="schoolboy">
              <div class="banner">
                <div class="box">
                  <van-swipe
                    class="my-swipe"
                    :autoplay="3000"
                    indicator-color="white"
                  >
                    <van-swipe-item
                      v-for="item in bannerList"
                      :key="item.id"
                    >
                      <router-link
                        custom
                        :to="'/details?id=' + item.bookId"
                        v-slot="{ href, navigate }"
                      >
                        <div class="img" :href="href" @click="navigate">
                          <img :src="item.cover" alt="" />
                        </div>
                      </router-link>
                    </van-swipe-item>
                  </van-swipe>
                </div>
              </div>
            </div>
            <!-- 排行 -->
            <div class="Ranking" v-if="lists[3]">
              <div class="center">
                <h4>
                  <span>{{ lists[3].name }}</span>
                  <router-link
                    custom
                    to="/leaderboard"
                    v-slot="{ href, navigate }"
                  >
                    <a :href="href" @click="navigate"
                      >完整榜单 <i class="iconfont icon-youjiantou-copy"></i
                    ></a>
                  </router-link>
                </h4>
                <div class="top">
                  <li
                    :class="index == RankingIndex ? 'con' : ''"
                    v-for="(item, index) in lists[3].lists"
                    :key="index"
                    @click="btnFun(index)"
                  >
                    {{ item.name }}
                  </li>
                </div>
                <div class="box">
                  <router-link
                    custom
                    :to="'/details?id=' + item.bookId"
                    v-slot="{ href, navigate }"
                    v-for="(item, index) in lists[3].lists[RankingIndex].lists"
                    :key="item.id"
                  >
                    <li :href="href" @click="navigate">
                      <!-- <div class="one">1</div> -->
                      <div class="left">
                        <div class="one a1" v-if="index == 0">
                          {{ index + 1 }}
                        </div>
                        <div class="one a2" v-if="index == 1">
                          {{ index + 1 }}
                        </div>
                        <div class="one a3" v-if="index == 2">
                          {{ index + 1 }}
                        </div>
                        <div class="one" v-if="index >= 3">{{ index + 1 }}</div>
                        <img :src="item.coverImg" alt="" />
                      </div>
                      <div class="right">
                        <p>{{ item.bookName }}</p>
                        <div v-if="RankingIndex == 0">{{ item.remark }}</div>
                        <div v-if="RankingIndex > 0">
                          {{ item.categoryName }}
                        </div>
                      </div>
                    </li>
                  </router-link>
                </div>
              </div>
            </div>

            <!-- 小说推荐 -->
            <div class="recommend" v-if="lists[10]">
              <div class="box">
                <!-- 猜你喜欢 -->
                <h3>{{ lists[10].name }}</h3>
                <ul v-for="item in lists[10].lists" :key="item.id">
                  <router-link
                    custom
                    :to="'/details?id=' + item.bookId"
                    v-slot="{ href, navigate }"
                  >
                    <div class="hize" :href="href" @click="navigate">
                      <div class="left">
                        <div class="img">
                          <img :src="item.coverImg" alt="" />
                        </div>
                        <!-- <img class="poin" src="../assets/img2/aip.png" alt="" /> -->
                      </div>
                      <div class="right">
                        <main>
                          <div>
                            <h6>{{ item.bookName }}</h6>
                            <p>
                              {{ item.introduction }}
                            </p>
                          </div>
                          <div>
                            <li>
                              <!-- <span>{{ item.bookChannel.name }}</span> -->
                              <!-- <span>{{ item.bookStatus.name }}</span> -->
                              <span>{{ getFilter(item.wordCount) }}字</span>
                            </li>
                            <!-- <p><b>8.6</b> 分</p> -->
                          </div>
                        </main>
                      </div>
                    </div>
                  </router-link>
                  <!-- <div class="one">
                    <span>都市类完结榜18名</span>
                  </div> -->
                </ul>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="男生">
          <div class="schoolboy">
            <!-- 轮播图 -->
            <div class="banner" v-if="malelist[0]">
              <div class="box">
                <van-swipe
                  class="my-swipe"
                  :autoplay="3000"
                  indicator-color="white"
                >
                  <van-swipe-item v-for="item in malelist[0].lists" :key="item.id">
                    <router-link
                      custom
                      :to="'/details?id=' + item.bookId"
                      v-slot="{ href, navigate }"
                    >
                      <div class="img" :href="href" @click="navigate">
                        <img :src="item.coverImg" alt="" />
                      </div>
                    </router-link>
                  </van-swipe-item>
                </van-swipe>
              </div>
            </div>
            <!-- 推荐 -->
            <div
              class="ChiefEditor"
              v-for="(item, index) in maledata"
              :key="index"
            >
              <div class="box">
                <h4>
                  <span>{{ item.name }}</span>
                  <router-link
                    custom
                    to="leaderboard"
                    v-slot="{ href, navigate }"
                  >
                    <a :href="href" @click="navigate"
                      >查看更多 <i class="iconfont icon-youjiantou-copy"></i
                    ></a>
                  </router-link>
                  <!-- <a>查看更多 <i class="iconfont icon-youjiantou-copy"></i></a> -->
                </h4>
                <ul v-if="index < 2">
                  <li v-for="(value, k) in item.lists" :key="k" v-show="k < 8">
                    <router-link
                      custom
                      :to="'/details?id=' + value.id"
                      v-slot="{ href, navigate }"
                    >
                      <div class="hize" :href="href" @click="navigate">
                        <div class="img">
                          <img :src="value.coverImg" alt="" />
                        </div>
                        <h5>{{ value.bookName }}</h5>
                        <p>{{ value.authorPenName }}</p>
                      </div>
                    </router-link>
                  </li>
                </ul>

                <ul v-if="index >= 2">
                  <li v-for="(items, k) in item.lists" :key="k" v-show="k < 4">
                    <router-link
                      custom
                      :to="'/details?id=' + items.bookId"
                      v-slot="{ href, navigate }"
                    >
                      <div class="hize" :href="href" @click="navigate">
                        <div class="img">
                          <img :src="items.coverImg" alt="" />
                        </div>
                        <h5>{{ items.bookName }}</h5>
                        <p>{{ items.authorPenName }}</p>
                      </div>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 小说推荐 -->
            <div class="recommend" v-if="malelist[15]">
              <div class="box">
                <h3>{{ malelist[15].name }}</h3>
                <ul v-for="item in malelist[15].lists" :key="item.id">
                  <router-link
                    custom
                    :to="'/details?id=' + item.bookId"
                    v-slot="{ href, navigate }"
                  >
                    <div class="hize" :href="href" @click="navigate">
                      <div class="left">
                        <router-link
                          custom
                          :to="'/details?id=' + item.bookId"
                          v-slot="{ href, navigate }"
                        >
                          <div class="img" :href="href" @click="navigate">
                            <img :src="item.coverImg" alt="" />
                          </div>
                        </router-link>
                        <!-- <img class="poin" src="../assets/img2/aip.png" alt="" /> -->
                      </div>
                      <div class="right">
                        <main>
                          <div>
                            <h6>{{ item.bookName }}</h6>
                            <p>
                              {{ item.introduction }}
                            </p>
                          </div>
                          <div>
                            <li>
                              <!-- <span>{{ item.bookChannel.name }}</span> -->
                              <!-- <span>{{ item.bookStatus.name }}</span> -->
                              <span>{{ getFilter(item.wordCount) }}字</span>
                            </li>
                            <!-- <p><b>8.6</b> 分</p> -->
                          </div>
                        </main>
                      </div>
                    </div>
                  </router-link>
                  <!-- <div class="one">
                    <span>都市类完结榜18名</span>
                  </div> -->
                </ul>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="女生">
          <div class="schoolboy schoolboy1">
            <!-- 轮播图 -->
            <div class="banner" v-if="femalelist[0]">
              <div class="box">
                <van-swipe
                  class="my-swipe"
                  :autoplay="3000"
                  indicator-color="white"
                >
                  <van-swipe-item
                    v-for="item in femalelist[0].lists"
                    :key="item"
                  >
                    <router-link
                      custom
                      :to="'/details?id=' + item.bookId"
                      v-slot="{ href, navigate }"
                    >
                      <div class="img" :href="href" @click="navigate">
                        <img :src="item.coverImg" alt="" />
                      </div>
                    </router-link>
                  </van-swipe-item>
                </van-swipe>
              </div>
            </div>
            <!-- 分类 -->
            <!-- <div class="branch">
              <div class="box">
                <router-link
                  custom
                  to="/leaderboard"
                  v-slot="{ href, navigate }"
                >
                  <li :href="href" @click="navigate">
                    <div class="img">
                      <img src="../assets/img/pswd_modify.png" alt="" />
                    </div>
                    <p>榜单</p>
                  </li>
                </router-link>

                <li>
                  <div class="img">
                    <img src="../assets/img/pswd_modify.png" alt="" />
                  </div>
                  <p>榜单</p>
                </li>
                <li>
                  <div class="img">
                    <img src="../assets/img/pswd_modify.png" alt="" />
                  </div>
                  <p>榜单</p>
                </li>
                <li>
                  <div class="img">
                    <img src="../assets/img/pswd_modify.png" alt="" />
                  </div>
                  <p>榜单</p>
                </li>
              </div>
            </div> -->
            <!-- 推荐 -->
            <div
              class="ChiefEditor"
              v-for="(item, index) in femaledata"
              :key="index"
            >
              <div class="box">
                <h4>
                  <!-- 女生精品 -->
                  <span>{{ item.name }}</span>
                  <router-link
                    custom
                    to="leaderboard"
                    v-slot="{ href, navigate }"
                  >
                    <a :href="href" @click="navigate"
                      >查看更多 <i class="iconfont icon-youjiantou-copy"></i
                    ></a>
                  </router-link>
                </h4>
                <ul v-if="index < 2">
                  <li
                    v-for="(value, k) in item.lists"
                    :key="value"
                    v-show="k < 8"
                  >
                    <router-link
                      custom
                      :to="'/details?id=' + value.id"
                      v-slot="{ href, navigate }"
                    >
                      <div class="hezi" :href="href" @click="navigate">
                        <div class="img">
                          <img :src="value.coverImg" alt="" />
                        </div>
                        <h5>{{ value.bookName }}</h5>
                        <p>{{ value.authorPenName }}</p>
                      </div>
                    </router-link>
                  </li>
                </ul>
                <ul v-if="index >= 2">
                  <li
                    v-for="(value, k) in item.lists"
                    :key="value"
                    v-show="k < 4"
                  >
                    <router-link
                      custom
                      :to="'/details?id=' + value.bookId"
                      v-slot="{ href, navigate }"
                    >
                      <div class="hezi" :href="href" @click="navigate">
                        <div class="img">
                          <img :src="value.coverImg" alt="" />
                        </div>
                        <h5>{{ value.bookName }}</h5>
                        <p>{{ value.authorPenName }}</p>
                      </div>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 小说推荐 -->
            <div class="recommend" v-if="femalelist[13]">
              <div class="box">
                <h3>{{ malelist[15].name }}</h3>
                <ul v-for="item in femalelist[13].lists" :key="item.id">
                  <router-link
                    custom
                    :to="'/details?id=' + item.bookId"
                    v-slot="{ href, navigate }"
                  >
                    <div class="hize" :href="href" @click="navigate">
                      <div class="left">
                        <div class="img">
                          <img :src="item.coverImg" alt="" />
                        </div>
                        <!-- <img class="poin" src="../assets/img2/aip.png" alt="" /> -->
                      </div>
                      <div class="right">
                        <main>
                          <div>
                            <h6>{{ item.bookName }}</h6>
                            <p>
                              {{ item.introduction }}
                            </p>
                          </div>
                          <div>
                            <li>
                              <!-- <span>{{ item.bookChannel.name }}</span> -->
                              <!-- <span>{{ item.bookStatus.name }}</span> -->
                              <span>{{ getFilter(item.wordCount) }}字</span>
                            </li>
                            <!-- <p><b>8.6</b> 分</p> -->
                          </div>
                        </main>
                      </div>
                    </div>
                  </router-link>
                  <!-- <div class="one">
                    <span>都市类完结榜18名</span>
                  </div> -->
                </ul>
              </div>
            </div>
          </div>
        </van-tab>

        <van-tab title="出版">
          <div class="schoolboy">
            <!-- 轮播图 -->
            <div class="banner" v-if="publishlist[0]">
              <div class="box">
                <van-swipe
                  class="my-swipe"
                  :autoplay="3000"
                  indicator-color="white"
                >
                  <van-swipe-item
                    v-for="item in publishlist[0].lists"
                    :key="item"
                  >
                    <router-link
                      custom
                      :to="'/details?id=' + item.bookId"
                      v-slot="{ href, navigate }"
                    >
                      <div class="img" :href="href" @click="navigate">
                        <img :src="item.coverImg" alt="" />
                      </div>
                    </router-link>
                  </van-swipe-item>
                </van-swipe>
              </div>
            </div>
            <!-- 分类 -->
            <!-- <div class="branch">
              <div class="box">
                <router-link
                  custom
                  to="/leaderboard"
                  v-slot="{ href, navigate }"
                >
                  <li :href="href" @click="navigate">
                    <div class="img">
                      <img src="../assets/img/pswd_modify.png" alt="" />
                    </div>
                    <p>榜单</p>
                  </li>
                </router-link>

                <li>
                  <div class="img">
                    <img src="../assets/img/pswd_modify.png" alt="" />
                  </div>
                  <p>榜单</p>
                </li>
                <li>
                  <div class="img">
                    <img src="../assets/img/pswd_modify.png" alt="" />
                  </div>
                  <p>榜单</p>
                </li>
                <li>
                  <div class="img">
                    <img src="../assets/img/pswd_modify.png" alt="" />
                  </div>
                  <p>榜单</p>
                </li>
              </div>
            </div> -->
            <!-- 推荐 -->
            <div
              class="ChiefEditor ChiefEditor1"
              v-for="(item, index) in publishdata"
              :key="index"
            >
              <div class="box" v-show="index < 2">
                <h4>
                  <span>{{ item.name }}</span>
                  <router-link
                    custom
                    to="leaderboard"
                    v-slot="{ href, navigate }"
                  >
                    <a :href="href" @click="navigate"
                      >查看更多 <i class="iconfont icon-youjiantou-copy"></i
                    ></a>
                  </router-link>
                </h4>
                <ul>
                  <li
                    v-for="(value, k) in item.lists"
                    :key="value"
                    v-show="k < 4"
                  >
                    <router-link
                      custom
                      :to="'/details?id=' + value.bookId"
                      v-slot="{ href, navigate }"
                    >
                      <div class="hezi" :href="href" @click="navigate">
                        <div class="img">
                          <img :src="value.coverImg" alt="" />
                        </div>
                        <h5>{{ value.bookName }}</h5>
                        <p>{{ value.authorPenName }}</p>
                      </div>
                    </router-link>
                  </li>
                </ul>
              </div>
              <!-- 小说推荐 -->
              <div class="recommend" v-if="index > 1">
                <div class="box">
                  <h4>
                    <span>{{ item.name }}</span>
                    <a
                      >查看更多 <i class="iconfont icon-youjiantou-copy"></i
                    ></a>
                  </h4>
                  <ul
                    v-for="(value, k) in item.lists"
                    :key="value.id"
                    v-show="k < 4"
                  >
                    <router-link
                      custom
                      :to="'/details?id=' + value.bookId"
                      v-slot="{ href, navigate }"
                    >
                      <div class="hize" :href="href" @click="navigate">
                        <div class="left">
                          <div class="img">
                            <img :src="value.coverImg" alt="" />
                          </div>
                        </div>
                        <div class="right">
                          <main>
                            <div>
                              <h6>{{ value.bookName }}</h6>
                              <p v-show="value.intro">
                                {{ value.intro }}
                              </p>
                            </div>
                            <div>
                              <div class="center">
                                <span>{{ value.authorName }}</span
                                ><span v-if="value.categoryName">{{
                                  value.categoryName
                                }}</span
                                ><span>{{ getFilter(value.wordCount) }}字</span>
                              </div>
                            </div>
                          </main>
                        </div>
                      </div>
                    </router-link>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
  <navfooterView></navfooterView>
</template>
<style lang="scss" scoped>
.home {
  padding-top: 54px;
  padding-bottom: 54px;
  background-image: linear-gradient(#d1f5e9, #f8f8f8);
  //搜索
  .sarch {
    background-color: #d1f5e9;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      flex: 1;
      background-color: #fefefc;
      height: 33px;
      line-height: 33px;
      padding-left: 12px;
      border-radius: 12px;
      color: #bebec2;
      font-size: 14px;
      i {
        margin-right: 5px;
        font-size: 16px;
        color: #000007;
      }
    }
    .right {
      margin-left: 20px;
      font-size: 12px;
      text-align: center;
      color: #35363e;
      i {
        margin-bottom: 5px;
      }
    }
  }
  .selected {
    z-index: 10;
    background-color: #d1f5e9;
    position: fixed;
    top: 57px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 14px;
    ul {
      justify-content: space-between;
      align-items: flex-end;
      align-content: flex-end;
      display: flex;
      width: 100%;
    }
    li {
      font-size: 13px;
      color: #3f3f47;
    }
    .con {
      font-size: 22px;
      color: #02030e;
      font-weight: 700;
      position: relative;
      &::after {
        position: absolute;
        width: 100%;
        content: "";
        bottom: 0;
        left: 0;
        height: 6px;
        display: block;
        z-index: -1;
        border-radius: 5px;
        background-image: linear-gradient(to right, #35d5b4, #b0ebeb);
      }
    }
  }
  ::v-deep {
    .van-tab {
      display: inline-block;
      flex: none;
    }
    .van-tabs__nav {
      background-color: #d1f5e9;
      // display: block;
      display: flex;
      align-items: center;
    }
    .van-tab--active {
      z-index: 1;
      .van-tab__text--ellipsis {
        font-size: 21px;
        font-weight: 800;
        font-family: "宋体";
      }
    }
    .van-tab__text {
      margin: 0 10px;
    }
    .van-tabs__line {
      top: 25px;
      height: 7px;
      z-index: 0;
      background-image: linear-gradient(to right, #35d5b4, #b0ebeb);
    }
  }

  //精选
  .maxbox {
    .Ranking {
      display: flex;
      justify-content: space-between;
      padding: 10px 14px 0;
      .center {
        border-radius: 8px;
        width: 100%;
        padding-bottom: 20px;
        background-color: #fff;
        h4 {
          align-items: center;
          display: flex;
          box-sizing: border-box;
          width: 100%;
          font-size: 17px;
          justify-content: space-between;
          padding: 18px 14px;
          a {
            color: #333333;
            font-size: 12px;
            i {
              font-size: 12px;
            }
          }
        }
        .top {
          display: flex;
          li {
            margin-left: 14px;
            padding: 7px 10px;
            font-size: 13px;
            border-radius: 9px;
            background-color: #f2f2f2;
            border: 1px solid transparent;
          }
          .con {
            background-color: #23b382;
            border-color: #12a271;
            color: #fff;
          }
        }
        .box {
          display: flex;
          flex-flow: wrap;
          padding-right: 15px;
          li {
            display: flex;
            width: 50%;
            padding: 19px 0 0 14px;
            box-sizing: border-box;
            .left {
              height: 57px;
              position: relative;
              margin-right: 10px;
              img {
                height: 100%;
                border-radius: 4px;
              }
              .right {
                flex: 1;
                .box-right {
                  display: flex;
                }
              }
              .one {
                position: absolute;
                right: 0px;
                transform: translate(40%, -40%);
                top: 0px;
                width: 15px;
                line-height: 17px;
                height: 15px;
                border: 1px solid #fff;
                text-align: center;
                font-size: 12px;
                color: #fff;
                background-color: #aeaeae;
                border-radius: 50%;
              }
              .a1 {
                background-color: #ffa205;
              }
              .a2 {
                background-color: #418af3;
              }
              .a3 {
                background-color: #fd684f;
              }
            }
            .right {
              flex: 1;

              p {
                width: 100%;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 10px;
                font-size: 13px;
                font-weight: 500;
              }
              div {
                font-size: 11px;
                color: #d3522a;
              }
            }
          }
        }
      }
    }
    .recommend {
      padding: 10px 14px;
      .box {
        border-radius: 8px;
        padding: 0 16px;
        background-color: #fff;
        h3 {
          padding: 20px 0 10px;
          font-size: 17px;
        }
        ul {
          padding: 6px 0;
          .hize {
            display: flex;
            .left {
              position: relative;
              .poin {
                height: 25px;
                top: 7px;
                left: -5px;
                position: absolute;
              }
              .img {
                border-radius: 6px;
                overflow: hidden;
                height: 87px;
                img {
                  height: 100%;
                }
              }
            }
            .right {
              main {
                border-radius: 0 10px 10px 0;
                display: flex;
                flex-wrap: wrap;
                padding-left: 12px;
              }
              div {
                width: 100%;
                h6 {
                  margin-bottom: 5px;
                  font-size: 13px;
                }
                p {
                  font-size: 12px;
                  color: #6f707c;
                  line-height: 18px;
                  -webkit-line-clamp: 2;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                &:nth-child(2) {
                  margin-top: 5px;
                  padding-right: 10px;
                  display: flex;
                  justify-content: space-between;
                  li {
                    font-size: 10px;
                    color: #9f9faa;
                    span {
                      padding: 0 5px;
                      display: inline-block;
                      border-right: 2px solid #eff1f0;
                      &:nth-child(1) {
                        padding-left: 0;
                      }
                      &:last-child {
                        border: none;
                      }
                    }
                  }
                  p {
                    color: #f7621c;
                    b {
                      font-size: 16px;
                    }
                  }
                }
              }
              font-size: 13px;
            }
          }
          .one {
            margin-top: 6px;
            margin-bottom: 12px;
            text-align: center;
            span {
              font-size: 13px;
              padding: 3px 10px;
              background-color: #f5f4f0;
              color: #927153;
            }
          }
        }
        .array {
          justify-content: space-between;
          display: flex;
          flex-wrap: wrap;
          li {
            width: 30%;
            .img {
              height: 141px;
              margin-bottom: 13px;
              border-radius: 6px;
              overflow: hidden;
              img {
                height: 141px;
              }
            }
            p {
              font-size: 13px;
              color: #22222c;
              font-weight: 600;
            }
            div {
              font-size: 12px;
              margin: 10px 0 12px;
              font-size: #b5b5be;
            }
          }
        }
      }
    }
  }
  // 男生
  .schoolboy {
    .banner {
      // padding: 0 0px;
      .box {
        border-radius: 8px;
        overflow: hidden;
      }
      .img {
        height: 120px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .branch {
      padding: 0 11px;
      .box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        border-radius: 8px;
        text-align: center;
        li {
          margin: 0 16px;
          padding: 15px 0 17px;
          .img {
            height: 40px;
            img {
              height: 100%;
            }
          }
        }
      }
    }
    .ChiefEditor {
      padding: 12px 11px 0;

      .box {
        background-color: #fff;
        border-radius: 8px;
        padding: 20px 7px;
        h4 {
          padding: 0 10px;
          box-sizing: border-box;
          width: 100%;
          font-size: 17px;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: space-between;
          a {
            font-size: 12px;
            color: #333;
            i {
              font-size: 12px;
            }
          }
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            margin-top: 19px;
            padding: 0 5px;
            width: 25%;
            box-sizing: border-box;
            .img {
              position: relative;
              height: 82px;
              padding: 0 5px;
              box-sizing: border-box;
              img {
                width: 100%;
                border-radius: 4px;
                box-sizing: border-box;
                height: 100%;
              }
              span {
                top: 8px;
                right: 4px;
                background-color: #ffe6ac;
                color: #5b3507;
                position: absolute;
                display: inline-block;
                font-size: 8px;
              }
            }
            h5 {
              font-size: 12px;
              margin-top: 5px;
              -webkit-line-clamp: 2;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            p {
              margin: 3px;
              font-size: 11px;
              color: #939393;
            }
          }
        }
      }
    }
    .recommend {
      padding: 10px 14px;
      .box {
        border-radius: 8px;
        padding: 0 16px;
        background-color: #fff;
        h3 {
          padding: 20px 0 10px;
          font-size: 17px;
        }
        ul {
          padding: 6px 0;
          .hize {
            display: flex;
            .left {
              position: relative;
              .poin {
                height: 25px;
                top: 7px;
                left: -5px;
                position: absolute;
              }
              .img {
                border-radius: 10px;
                overflow: hidden;
                height: 87px;
                img {
                  height: 100%;
                }
              }
            }
            .right {
              main {
                border-radius: 0 10px 10px 0;
                display: flex;
                flex-wrap: wrap;
                padding-left: 12px;
              }
              div {
                width: 100%;
                h6 {
                  margin-bottom: 5px;
                  font-size: 13px;
                }
                p {
                  font-size: 12px;
                  color: #6f707c;
                  line-height: 18px;
                  -webkit-line-clamp: 2;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                &:nth-child(2) {
                  margin-top: 5px;
                  padding-right: 10px;
                  display: flex;
                  justify-content: space-between;
                  li {
                    font-size: 10px;
                    color: #9f9faa;
                    span {
                      padding: 0 5px;
                      display: inline-block;
                      border-right: 2px solid #eff1f0;
                      &:nth-child(1) {
                        padding-left: 0;
                      }
                      &:last-child {
                        border: none;
                      }
                    }
                  }
                  p {
                    color: #f7621c;
                    b {
                      font-size: 16px;
                    }
                  }
                }
              }
              font-size: 13px;
            }
          }
          .one {
            margin-top: 6px;
            margin-bottom: 12px;
            text-align: center;
            span {
              font-size: 13px;
              padding: 3px 10px;
              background-color: #f5f4f0;
              color: #927153;
            }
          }
        }
        .array {
          justify-content: space-between;
          display: flex;
          flex-wrap: wrap;
          li {
            width: 30%;
            .img {
              height: 141px;
              margin-bottom: 13px;
              border-radius: 6px;
              overflow: hidden;
              img {
                height: 141px;
              }
            }
            p {
              font-size: 13px;
              color: #22222c;
              font-weight: 600;
            }
            div {
              font-size: 12px;
              margin: 10px 0 12px;
              font-size: #b5b5be;
            }
          }
        }
      }
    }
  }
  .ChiefEditor1 {
    .recommend {
      padding: 0;
      margin-top: 10px;
      .box {
        padding: 20px 15px;

        h4 {
          padding: 0 10px;
          box-sizing: border-box;
          width: 100%;
          font-size: 17px;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: space-between;
          a {
            font-size: 12px;
            color: #333;
            i {
              font-size: 12px;
            }
          }
        }
      }

      .center {
        display: flex;
        span {
          border-right: 2px solid #ccc;
          color: #ccc;
          padding: 0 5px;
          font-size: 12px;
          &:last-child {
            border: none;
          }
        }
      }
    }
  }
}
</style>